<template>
	<view class="content">
		<nav-bar title='产品详情' black bgColor="rgba(255,255,255,0)" titleColor="#333333"></nav-bar>
		<view class="head-box">
			<view class="p1">
				<u--text prefixIcon="https://item.techolic.cn/hjf/Public/appimg/icon_my_vip1.png"
					iconStyle="font-size: 19px;margin-right: 10rpx" size="32rpx" :bold="true" color="#ffffff"
					:text="info.name"></u--text>
				<text class="h1">{{info.describes_value}}</text>
			</view>
			<view class="p2">
				<view class="top">
					<view class="left">
						最高额度
					</view>
					<view class="right">
						最长可分<text>{{info.max_time}}</text>期还款
					</view>
				</view>
				<view class="middle">
					{{info.max_limit}}
				</view>
				<view class="bottom-tips">
					年利率 <text>{{info.interest}}</text>
				</view>
			</view>
		</view>
		<view class="item-box">
			<view class="h1">
				<u--text prefixIcon="https://item.techolic.cn/hjf/Public/appimg/icon_my_vip1.png"
					iconStyle="font-size: 19px;margin-right: 10rpx" size="32rpx" :bold="true" color="#ffffff"
					text="产品详情"></u--text>
			</view>
			<view class="container">
				<!-- <view class="item1">
					<view class="title">
						申请条件
					</view>
					<view class="text">
						1.年龄18-45周岁，学生除外；
					</view>
					<view class="text">
						2.实名手机号；
					</view>
					<view class="text">
						3.稳定的收入来源
					</view>
				</view> -->
				<view class="item2">
					<!-- <view class="title">
						申请条件
					</view> -->
					<!-- <view class="cell-box">
						<view class="left">
							借款额度
						</view>
						<view class="right">
							{{info.min_limit}}-{{info.max_limit}}元
						</view>
					</view>
					<view class="cell-box">
						<view class="left">
							年利率
						</view>
						<view class="right">
							<u-parse :content="info.deadline_value"></u-parse>
						</view>
					</view> -->
					<!-- <view class="cell-box">
						<view class="left">
							放款时效
						</view>
						<view class="right">
							最快3分钟
						</view>
					</view> -->
					<view class="cell-box" v-if="info.province_value != ''">
						<view class="left">
							准入区域
						</view>
						<view class="right">
							{{info.province_value}}{{info.city_value}}
						</view>
					</view>
					<view class="cell-box" v-if="info.repayment != ''">
						<view class="left">
							还款方式
						</view>
						<view class="right">
							<u-parse :content="info.repayment"></u-parse>
						</view>
					</view>
					<view class="cell-box" v-if="info.advantage != ''">
						<view class="left">
							产品优势
						</view>
						<view class="right">
							<u-parse :content="info.advantage"></u-parse>
						</view>
					</view>
					<view class="cell-box" v-if="info.personal_requirement != ''">
						<view class="left">
							个人要求
						</view>
						<view class="right">
							<u-parse :content="info.personal_requirement"></u-parse>
						</view>
					</view>
					<view class="cell-box" v-if="info.enterprise_requirement != ''">
						<view class="left">
							企业要求
						</view>
						<view class="right">
							<u-parse :content="info.enterprise_requirement"></u-parse>
						</view>
					</view>
					<view class="cell-box" v-if="info.credit_requirement != ''">
						<view class="left">
							征信要求
						</view>
						<view class="right">
							<u-parse :content="info.credit_requirement"></u-parse>
						</view>
					</view>
					<view class="cell-box" v-if="info.other != ''">
						<view class="left">
							备注
						</view>
						<view class="right">
							<u-parse :content="info.other"></u-parse>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="bottom-info">
			<view class="p1">
				<u--text prefixIcon="https://item.techolic.cn/hjf/Public/appimg/icon_my_vip1.png"
					iconStyle="font-size: 19px;margin-right: 10rpx" size="32rpx" :bold="true" color="#ffffff"
					text="必填资料"></u--text>
				
			</view>
			<view class="p2">
				<view class="title">
					填写资料信息
				</view>
				<view class="text-box">
					<view class="text-left">
						姓名
					</view>
					<view class="text-right">
						<u--input placeholder="请输入姓名" fontSize="24rpx" border="none" v-model="nameValue"
							@change="nameSet"></u--input>
					</view>
				</view>
				<view class="text-box">
					<view class="text-left">
						手机号
					</view>
					<view class="text-right">
						<u--input placeholder="请输入手机号" fontSize="24rpx" border="none" v-model="phoneValue"
							@change="phoneSet"></u--input>
					</view>
				</view>
			</view>
		</view> -->
		<view class="btn-box" @click="applyTap">
			立即咨询
		</view>
		<view class="fgx"></view>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
				nameValue:'',
				phoneValue:'',
				id:0,
				info:{
					name:'',
					describes_value:'',
					max_time:'',
					max_limit:'',
					interest:'',
					min_limit:'',
					deadline_value:'',
					repayment:'',
					advantage:'',
					province_value:'',
					city_value:'',
					personal_requirement:'',
					enterprise_requirement:'',
					credit_requirement:'',
					other:'',
				},
			}
		},
		onLoad(e){
			console.log(e);
			this.id = e.id;
			app.login();
			this.get_data();
		},
		methods: {
			get_data(index) {
				var _this = this;
				app._get('index/get_data_info', {
					id:_this.id,
				}, function(res) {
					console.log('获取数据');
					console.log(res);
					if(res.code == -2){
						app.showError(res.msg,function(){
							uni.redirectTo({
								url: "/pages/vipBuyPage/vipBuyPage"
							})
						})
						
					}else{
						_this.info = res.product;
					}
					
				});
			},
			nameSet(e){
				console.log(e)
			},
			phoneSet(e){
				console.log(e)
			},
			applyTap(){
				/*console.log('立即申请');
				var _this = this;
				var nameValue = _this.nameValue;
				var phoneValue = _this.phoneValue;
				var info = _this.info;
				if(nameValue == ''){
					app.showError('请填写姓名');
					return false;
				}
				if(phoneValue == ''){
					app.showError('请填写联系电话');
					return false;
				}
				uni.showLoading({
					title: "提交中...",
					mask: true
				});
				
				
				app._post_form('index/product_apply', {
					cid:app.globalData.cid,
					pid: info.id,
					name: nameValue,
					phone: phoneValue,
				}, function(result) {
					app.showMsg(result.msg);
				}, false, function() {
					//uni.hideLoading();
				});*/
				var _this = this;
				var info = _this.info;
				uni.navigateTo({
					url:"/pages/casePage/casePage?id="+info.id,
				})
			},
		}
	}
</script>

<style lang="less">
	.content {
		width: 750rpx;
		min-height: 1334rpx;
		background-image: url('https://item.techolic.cn/hjf/Public/appimg/person_bg.png');
		background-repeat: no-repeat;
		background-size: cover;

		.head-box {
			margin: 32rpx;
			border-radius: 24rpx;
			background-color: #FC945A;
			padding: 2rpx;
			.p1 {
				display: flex;
				align-items: center;
				padding: 24rpx;

				.h1 {
					font-size: 24rpx;
					color: rgba(#ffffff, 0.5);
				}
			}

			.p2 {
				padding: 32rpx;
				background-color: #feefe4;
				margin: 4rpx;
				border-radius: 22rpx;

				.top {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 20rpx;

					.left {
						font-size: 28rpx;
						color: rgba(#7C4608, 0.5);
					}

					.right {
						font-size: 28rpx;
						color: rgba(#7C4608, 0.5);

						text {
							color: #FF1111;
							font-weight: bold;
						}
					}
				}

				.middle {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 30rpx;

					.left {
						font-size: 64rpx;
						color: #7C4608;
						font-weight: bold;
					}

					.right {
						padding: 8rpx 16rpx;
						background-color: #F8DEC5;
						color: #7C4608;
						font-size: 24rpx;
						border-radius: 24rpx;

					}

				}

				.bottom-tips {
					font-size: 24rpx;
					color: rgba(#1E182F, 0.5);

					text {
						color: #FF8811;
					}
				}
			}
		}

		.item-box {
			border-radius: 24rpx;
			background-color: #FF8811;
			margin: 32rpx;
			padding: 2rpx;
			.h1 {
				padding: 32rpx;
			}

			.container {
				border-radius: 22rpx;
				background-color: #ffffff;
				margin: 4rpx;

				.item1 {
					padding: 24rpx;

					.title {
						font-size: 32rpx;
						color: #FF8811;
						font-weight: bold;
						margin-bottom: 32rpx;
					}

					.text {
						font-size: 24rpx;
						color: rgba(#1E182F, 0.5);
						margin-bottom: 20rpx;
					}
				}

				.item2 {
					padding: 24rpx;

					.title {
						font-size: 32rpx;
						color: #FF8811;
						font-weight: bold;
						margin-bottom: 32rpx;
					}

					.cell-box {
						display: flex;
						align-items: center;
						padding: 24rpx 0;
						border-bottom: 2rpx solid #E5E6EB;

						.left {
							width: 20%;
							margin-right: 20rpx;
							font-size: 28rpx;
							color: rgba(#1D2129, 0.7);
						}

						.right {
							width: 80%;
							font-size: 28rpx;
							color: #1E182F;
						}
					}
					.cell-box:last-child{
						border: 0;
					}
				}
			}
		}

		.bottom-info {
			border-radius: 24rpx;
			background-color: #FF8811;
			margin: 32rpx;

			.p1 {
				padding: 32rpx;
				display: flex;
				align-items: center;

				.h1 {
					font-size: 24rpx;
					color: #ffffff;
				}
			}

			.p2 {
				margin: 4rpx;
				padding: 24rpx;
				background-color: #ffffff;
				border-radius: 22rpx;
				.title {
					font-size: 32rpx;
					font-weight: bold;
					color: #FF8811;
				}

				.text-box {
					display: flex;
					align-items: center;
					padding: 24rpx 0;
					border-bottom: 2rpx solid #E5E6EB;

					.text-left {
						width: 200rpx;
						font-size: 28rpx;
						color: #1D2129;
					}

					.text-right {
						display: flex;
						align-items: center;
						font-size: 24rpx;
						// color: #FF8811;
						color: #86909C;
					}
				}
				.text-box:last-child{
					border: 0;
				}
			}
		}

		.btn-box {
			height: 88rpx;
			line-height: 88rpx;
			margin: 32rpx;
			text-align: center;
			font-size: 32rpx;
			color: #ffffff;
			background-color: #FF8811;
			border-radius: 18rpx;
		}

		.fgx {
			height: 150rpx;
		}
	}
</style>